<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <style>
        #content {
            padding-top: 80px;
        }
    </style>
    <link href="/3rd/bs/css/bootstrap.min.css" rel="stylesheet" type="text/css" />
    <link rel="stylesheet" href="/css/adjust_menu.css"/>

    <title>设置抢票菜单 - 紫荆之声</title>
</head>
<body>
    <header class="navbar navbar-default navbar-fixed-top" role="navigation">
        <div class="container">
            <div class="navbar-header">
                <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
                    <span class="icon-bar"></span>
                    <span class="icon-bar"></span>
                    <span class="icon-bar"></span>
                </button>
                <a class="navbar-brand" style="cursor:default" id="nav-title"></a>
            </div>

            <div class="navbar-collapse collapse">
                <ul class="nav navbar-nav" id="nav-li"></ul>
                <ul class="nav navbar-nav navbar-right" id="nav-li-right"></ul>
            </div>
        </div>
    </header>

    <div id="content"></div>

    <footer class="bs-footer" role="contentinfo">
        <hr>
        <div class="container" id="footer" style="text-align: center"></div>
    </footer>

<script type="text/template" id="tpl-nav-title">
“紫荆之声”票务管理系统
</script>

<script type="text/template" id="tpl-nav-li">
    <li><a class="btn-link" href="/a/activity/list">活动列表</a></li>
    <li class="active">
        <a href="/a/activity/menu">抢票菜单</a>
    </li>
</script>

<script type="text/template" id="tpl-nav-li-right">
    <li><a href="javascript:;" onclick="logout()" >登出</a></li>
</script>

<script type="text/template" id="tpl-content">
    {% if status == 0 or status == 1 %}
    <div class="container" id="container-loading">
        <img src="/img/loading.gif"><span id="loading-msg">正在载入...</span>
    </div>
    {% elif status == 2 %}
    <div class="container" id="container-result">
    <span id="result-msg">成功！</span>
        <br/><br/>
    <a href="/a/activity/menu" class="btn btn-info">确定</a>
    <a href="/a/activity/list" class="btn btn-default">回到活动列表</a>
    </div>
    {% else %}
    <div class="container" id="container-main">
        <div class="pageheader">
            <h1 class="lead">设置微信抢票菜单</h1>
        </div>
        <div class="col-xs-4">
            <div class="panel panel-default">
                <div class="panel-heading">现在设置的菜单（至多五个）：<br/>已自动移除过时活动</div>
                <ul class="list-group" id="current-menus">
                {% for menu in showActs %}
                    <li class="list-group-item">
                    {% if loop.first %}
                        <button class="btn btn-link" disabled><span class="glyphicon"></span></button>
                    {% else %}
                        <button class="btn btn-link" onclick="upmenu({{ loop.index0 }})">
                            <span class="glyphicon glyphicon-circle-arrow-up"></span>
                        </button>
                    {% endif %}
                    {% if loop.last %}
                        <button class="btn btn-link" disabled><span class="glyphicon"></span></button>
                    {% else %}
                        <button class="btn btn-link" onclick="downmenu({{ loop.index0 }})">
                            <span class="glyphicon glyphicon-circle-arrow-down"></span>
                        </button>
                    {% endif %}
                        <button class="btn btn-link" onclick="removemenu({{ loop.index0 }})">
                            <span class="glyphicon glyphicon-remove"></span>
                        </button>
                        {{ menu.name }}
                    </li>
                {% endfor %}
                </ul>
                <div class="panel-footer font-center">
                    抢票<span class="glyphicon glyphicon-chevron-up"></span>
                </div>
            </div>
            <button class="btn btn-danger btn-lg" onclick="submitMenu()">提交</button>
        </div>
        <div class="col-xs-1"></div>
        <div class="col-xs-5" id="alter-activities">
            <div class="panel panel-default">
                <div class="panel-heading">现在可加入菜单的活动：</div>
                <ul class="list-group" id="current-alters">
                {% for menu in hideActs %}
                    <li class="list-group-item">
                    {% if showActs.length < 5 %}
                        <button class="btn btn-link" onclick="change_alter({{ loop.index0 }})">
                            <span class="glyphicon glyphicon-plus"></span>
                        </button>
                    {% else %}
                        <button class="btn btn-link" disabled>
                            <span class="glyphicon"></span>
                        </button>
                    {% endif %}
                        {{ menu.name }}
                    </li>
                {% endfor %}
                </ul>
            </div>
        </div>
    </div>
    {% endif %}
</script>

<script type="text/template" id="tpl-footer">
    <a href="http://www.xuetangx.com/" target="_blank">学堂在线</a>
    <a href="http://www.tsinghua.edu.cn/" target="_blank">清华大学</a>
    <a href="https://github.com/ThssSE" target="_blank">软件工程</a><br>
    &copy; 2016
</script>

<script src="/3rd/jquery.js"></script>
<script src="/3rd/bs/js/bootstrap.min.js"></script>
<script src="/3rd/swig.js"></script>
<script src="/js/base.js"></script>
<script src="/js/base_admin.js"></script>
<script src="/js/adjust_menu.js"></script>

<script>
    var locals = {
        status: 0
    };
    var renderTemplate = function (name) {
        $('#' + name).html(swig.render($('#tpl-' + name).html(), {locals: locals}));
    };
    var render = function () {
        renderTemplate('nav-title');
        renderTemplate('nav-li');
        renderTemplate('nav-li-right');
        renderTemplate('content');
        renderTemplate('footer');
    };
    $(function () {
        swig.setDefaultTZOffset(new Date().getTimezoneOffset());
        render();
        loginRequired(function () {
            api.get('/api/a/activity/menu', {}, function (activities) {
                locals.showActs = [];
                locals.hideActs = [];
                $.each(activities, function (i, act) {
                    if (act.menuIndex > 0) {
                        locals.showActs.push(act);
                    } else {
                        locals.hideActs.push(act);
                    }
                });
                locals.showActs.sort(function (act1, act2) {
                    return act1.menuIndex - act2.menuIndex;
                });
                locals.hideActs.sort(function (act1, act2) {
                    return act1.id - act2.id;
                });
                locals.status = -1;
                render();
            }, dftFail);
        });
    });
    var submitMenu = function () {
        var ids = $.map(locals.showActs, function (act) {
            return act.id;
        });
        locals.status = 1;
        render();
        api.post('/api/a/activity/menu', ids, function (data) {
            locals.status = 2;
            render();
        }, function (errno, errmsg, e) {
            dftFail(errno, errmsg, e);
            locals.status = -1;
            render();
        });
    };
</script>
</body>
</html>
